<template>
    <div>
        <h2>🛒 商城</h2>
        <div class="shop">
            <div v-for="product in products" :key="product.id" class="product-card">
                <img :src="product.image" />
                <h4>{{ product.name }}</h4>
                <p>￥{{ product.price }}</p>
                <button @click="addToCart(product)">加入购物车</button>
            </div>
        </div>

        <div class="cart" v-if="cart.length > 0">
            <h3>我的购物车</h3>
            <ul>
                <li v-for="item in cart">{{ item.name }} - ￥{{ item.price }}</li>
            </ul>
            <button @click="goToPayment">去结算</button>
        </div>

        <div v-if="showPaymentForm" class="payment-modal">
            <h3>填写收货信息</h3>
            <input v-model="address" placeholder="地址" />
            <input v-model="phone" placeholder="电话" />
            <p>总价：￥{{ totalPrice }}</p>
            <button @click="openQRCode">下一步</button>
            <button @click="showPaymentForm = false">取消</button>
        </div>

        <div v-if="showQRCode" class="payment-modal">
            <h3>扫码支付</h3>
            <img :src="paymentImg" style="width: 200px;" />
            <button @click="completePayment">已完成支付</button>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import product1 from '@/assets/img_community/product1.png'
import product2 from '@/assets/img_community/product2.png'
import product3 from '@/assets/img_community/product3.png'
import paymentImg from '@/assets/img_community/payment.png'

const products = [
    { id: 1, name: '像素T恤', price: 99, image: product1 },
    { id: 2, name: '游戏手柄挂件', price: 49, image: product2 },
    { id: 3, name: '复古徽章', price: 29, image: product3 }
]

const cart = ref([])
const address = ref('')
const phone = ref('')
const showPaymentForm = ref(false)
const showQRCode = ref(false)

const totalPrice = computed(() => cart.value.reduce((sum, item) => sum + item.price, 0))

function addToCart(product) {
    cart.value.push(product)
}

function goToPayment() {
    showPaymentForm.value = true
}

function openQRCode() {
    if (!address.value || !phone.value) return alert('请填写完整信息')
    showQRCode.value = true
}

function completePayment() {
    alert(`支付成功！地址：${address.value} 电话：${phone.value}`)
    cart.value = []
    address.value = ''
    phone.value = ''
    showQRCode.value = false
    showPaymentForm.value = false
}
</script>
<style>
.shop {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.product-card {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 12px;
    width: 150px;
    text-align: center;
    color: #000;
}

.product-card img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.cart {
    margin-top: 20px;
    background: #f3f3f3;
    padding: 12px;
    border-radius: 8px;
    color: #000;
    display: flex;
    flex-direction: column;
    width: 700px;
    justify-self: center;
}

.payment-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border: 2px solid #42b983;
    border-radius: 8px;
    z-index: 9999;
}

.payment-modal input {
    display: block;
    margin-bottom: 10px;
    width: 100%;
    padding: 8px;
}
</style>